<template>
  <div class="projectlist-container">
    <el-table :data="projectList" style="width: 100%" border>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column prop="name" label="项目名称" header-align="center">
      </el-table-column>
      <el-table-column label="项目描述" header-align="center">
        <template slot-scope="scope">
          <ul class="ul-container">
            <li v-for="(item, i) in scope.row.description" :key="i">
              {{ item }}
            </li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column align="center" label="预览图" width="150">
        <template slot-scope="scope">
          <el-image
            fit="fit"
            :src="setDevImg(scope.row.thumb)"
            :preview-src-list="[setDevImg(scope.row.thumb)]"
            :style="{ with: '100px', height: '100px' }"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="140">
        <template slot-scope="scope">
          <el-tooltip content="GitHub 项目地址">
            <el-button type="info" size="mini" icon="github-fill" circle>
              <a
                target="__blank"
                :href="
                  scope.row.github.includes('http')
                    ? scope.row.github
                    : 'javascript:void(0)'
                "
              >
                <svg-icon icon-class="github-fill"></svg-icon>
              </a>
            </el-button>
          </el-tooltip>
          <el-tooltip content="项目编辑" class="middle-btn">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="handlerEditProject(scope.row)"
            />
          </el-tooltip>
          <el-tooltip content="项目删除">
            <el-button
              @click="handlerDeleteProject(scope.row)"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getProjectAPI, deleteProjectAPI } from "@/api/project";
import { setDevImg } from "@/utils";
import { MessageBox } from "element-ui";
export default {
  name: "ProjectList",
  data() {
    return {
      projectList: [],
    };
  },
  created() {
    this.getProjectList();
  },
  methods: {
    setDevImg,
    async getProjectList() {
      const res = await getProjectAPI();
      if (typeof res !== "string") {
        this.projectList = res.data;
      } else {
        const { msg } = JSON.parse(res);
        this, $message.error(msg);
      }
    },
    handlerDeleteProject(row) {
      MessageBox.confirm(`确认删除项目 ${row.name} ?`, "项目删除", {})
        .then(async () => {
          const res = await deleteProjectAPI(row.id);
          if (typeof res !== "string") {
            this.getProjectList();
            this.$message.success(`删除项目 ${row.name} 成功!`);
          } else {
            const { msg } = JSON.parse(res);
            this.$message.error(msg);
          }
        })
        .catch(() => {});
    },
    handlerEditProject(row) {
      this.$store.dispatch("project/setProjectForm", row);
      this.$router.push({ path: "/project/editproject" });
    },
  },
};
</script>

<style scoped lang="scss">
.projectlist-container {
  padding: 10px;
  .ul-container {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}
</style>
